<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情页1：商品图片不带图片放大镜效果</title>
    <meta name="author" content="xiaoma"/>
    <meta name="description" content="imitateWeb"/>
    <meta name="keywords" content="good,detail"/>
    <meta name="copyright" content="xiaoma所有"/>
    <!--打开网页，顶部标签页右侧显示图标-->
    <link rel="Shortcut Icon" href="img/horse.ico">
    <!--引入外部样式表-->
    <link rel="stylesheet" href="css/resetcss.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div id="header">
    <ul id="leftlist" class="list">
        <li><a href="#" class="link">请登录</a></li>
        <li><a href="#" class="link">免费注册</a></li>
    </ul>
    <ul id="rightlist" class="list">
        <li class="haschild">
            <a href="#" class="link" title="myorders">我的订单
            </a>
            <ul class="showdetail">
                <li><a href="#" class="item">全部订单</a></li>
                <li><a href="#" class="item">待付款订单</a></li>
                <li><a href="#" class="item">待收货订单</a></li>
                <li><a href="#" class="item">待评价订单</a></li>
            </ul>
        </li>
        <li><a href="#" class="link">购物车</a></li>
        <li class="haschild"><a href="#" class="link">收藏夹
        </a>
            <ul class="showdetail">
                <li><a href="#" class="item">收藏的商品</a></li>
                <li><a href="#" class="item">收藏的店铺</a></li>
            </ul>
        </li>
        <li><a href="#" class="link">商品分类</a></li>
        <li class="haschild">
            <a href="#" class="link">网站导航
            </a>

            <div class="showdetail biglist">
                <div class="listblock">
                    <h2 class="shoptitle">主题市场</h2>
                    <ul>
                        <li><a href="#" class="items">女装</a></li>
                        <li><a href="#" class="items">男装</a></li>
                        <li><a href="#" class="items">鞋靴</a></li>
                        <li><a href="#" class="items">箱包</a></li>
                        <li><a href="#" class="items">母婴</a></li>
                        <li><a href="#" class="items">美妆</a></li>
                        <li><a href="#" class="items">户外</a></li>
                        <li><a href="#" class="items">食品</a></li>
                        <li><a href="#" class="items">珠宝</a></li>
                    </ul>
                </div>
                <div class="listblock centerblock">
                    <h2 class="shoptitle">特色市场</h2>
                    <ul>
                        <li><a href="#" class="items">女装</a></li>
                        <li><a href="#" class="items">男装</a></li>
                        <li><a href="#" class="items">鞋靴</a></li>
                        <li><a href="#" class="items">箱包</a></li>
                        <li><a href="#" class="items">母婴</a></li>
                        <li><a href="#" class="items">美妆</a></li>
                        <li><a href="#" class="items">户外</a></li>
                        <li><a href="#" class="items">食品</a></li>
                        <li><a href="#" class="items">珠宝</a></li>
                    </ul>
                </div>
                <div class="listblock">
                    <h2 class="shoptitle">跳骚市场</h2>
                    <ul>
                        <li><a href="#" class="items">女装</a></li>
                        <li><a href="#" class="items">男装</a></li>
                        <li><a href="#" class="items">鞋靴</a></li>
                        <li><a href="#" class="items">箱包</a></li>
                        <li><a href="#" class="items">母婴</a></li>
                        <li><a href="#" class="items">美妆</a></li>
                        <li><a href="#" class="items">户外</a></li>
                        <li><a href="#" class="items">食品</a></li>
                        <li><a href="#" class="items">珠宝</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>
<div id="content">
    <div id="shop">
        <!--店铺名称-->
        <a href="#">
            <div id="shopname">店铺：私房包袋</div>
        </a>
        <!--搜索框-->
        <div id="search" class="query">
            <input type="text" id="select" placeholder="请输入搜索文字..."/>
            <button type="button" id="btnquery">搜索</button>
        </div>
    </div>
    <div id="shopmenus">
        <ul id="smenus">
            <li class="hasmenu">
                <a href="#" class="smenu">所有分类</a>
                <ul class="catalogs">
                    <li class="hasmenutwo"><a href="#" class="class">上衣</a>
                        <ul class="twocatalog">
                            <li><a href="#" class="class">针织衫</a>
                            </li>
                            <li><a href="#" class="class">毛呢大衣</a></li>
                            <li><a href="#" class="class">羽绒服</a></li>
                            <li><a href="#" class="class">棉衣</a></li>
                            <li><a href="#" class="class">外套</a></li>
                            <li><a href="#" class="class">T恤</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="class">裙子</a></li>
                    <li><a href="#" class="class">裤子</a></li>
                    <li><a href="#" class="class">套装</a></li>
                    <li><a href="#" class="class">鞋子</a></li>
                    <li><a href="#" class="class">包包</a></li>
                    <li><a href="#" class="class">配饰</a></li>
                </ul>
            </li>
            <li><a href="#" class="smenu">店铺首页</a></li>
            <li><a href="#" class="smenu">新品上线</a></li>
            <li><a href="#" class="smenu">活动专区</a></li>
            <li><a href="#" class="smenu">搭配专区</a></li>
            <li><a href="#" class="smenu">精品推荐</a></li>
            <li><a href="#" class="smenu">过季商品</a></li>
            <li><a href="#" class="smenu">品牌介绍</a></li>
        </ul>
    </div>
    <div id="goodshow">
        <div id="imags">
             <div id="bigimgs">
                 <ul>
                     <li><img src="img/good1.jpg"/></li>
                     <li><img src="img/good2.jpg"/></li>
                     <li><img src="img/good3.jpg"/></li>
                     <li><img src="img/good4.jpg"/></li>
                     <li><img src="img/good5.jpg"/></li>
                 </ul>
             </div>
             <div id="smallimgs">
                 <ul>
                     <li style="border-color: #cc6688"><img src="img/good1.jpg" data-count="0"/></li>
                     <li><img src="img/good2.jpg" data-count="1"/></li>
                     <li><img src="img/good3.jpg" data-count="2"/></li>
                     <li><img src="img/good4.jpg" data-count="3"/></li>
                     <li><img src="img/good5.jpg" data-count="4"/></li>
                 </ul>
             </div>
        </div>
        <div id="imgtxt">
            <h2>新品上市 连帽中长款毛衣外套 韩版大衣女</h2>

            <div class="goodinfo">此款韩版毛衣外套，是轮廓大衣，时尚，大气，衬皮肤。棉线舒服温暖，你喜欢韩风妹子的不错选择哦！</div>
            <div class="goodinfo">价格&nbsp;&nbsp;&nbsp;&nbsp;<span class="price">￥266</span></div>
            <div class="goodinfo">配送&nbsp;&nbsp;&nbsp;&nbsp;<span class="price">包邮</span></div>
            <div class="goodinfo" id="size">尺码&nbsp;&nbsp;&nbsp;&nbsp;
                <p class="block">S</p>

                <p class="block">M</p>

                <p class="block">L</p></div>
            <div class="goodinfo" id="color">颜色&nbsp;&nbsp;&nbsp;&nbsp;<p class="block">粉色</p>

                <p class="block">白色</p>

                <p class="block">黑色</p></div>
            <div class="goodinfo">数量&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" min="1" id="num" value="1"/></div>
            <div class="goodinfo"><input type="button" value="立即购买" class="btngood" id="btnbuy"/>&nbsp;&nbsp;&nbsp;&nbsp;<input
                    type="button" value="加入购物车" class="btngood" id="btnadd"/></div>
        </div>
        <div id="recommend">
            <h2>热卖商品</h2>

            <div id="rgood">
                <ul>
                    <li><a href="#" class="suggest"><img src="img/r1.jpg"></a>

                        <div class="showprice">￥128.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r2.jpg"></a>

                        <div class="showprice">￥238.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>

                        <div class="showprice">￥158.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>

                        <div class="showprice">￥268.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r1.jpg"></a>

                        <div class="showprice">￥128.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r2.jpg"></a>

                        <div class="showprice">￥238.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>

                        <div class="showprice">￥158.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>

                        <div class="showprice">￥268.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r3.jpg"></a>

                        <div class="showprice">￥158.6</div>
                    </li>
                    <li><a href="#" class="suggest"><img src="img/r4.jpg"></a>

                        <div class="showprice">￥268.6</div>
                    </li>
                </ul>
            </div>
            <div id="arrow">
                <p id="arrtop"></p>

                <p id="arrbot"></p>
            </div>
        </div>
    </div>
    <div id="gooddetail">

    </div>
</div>
<div id="footer">
    All Rights Reserved. xiaomaer 版权所有
</div>
<!--显示高清大图-->
<div id="showbigimg"><img src="img/good1.jpg" id="bigimg"></div>
<script src="js/good.js"></script>
</body>
</html>